<template>
  <div>
    <!-- 面包屑 -->
    <!-- <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <img class="icon" src="@/assets/authentication/组6-6.png" alt="" />
        <el-breadcrumb-item>
          <span class="span">用户中心</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="span" style="color: #666">认证信息</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
    <!-- 认证信息主体 -->
    <div class="box" v-loading="loading">
      <div class="title">
        <h3>
          <span>平台认证</span>
        </h3>
      </div>
      <div class="f1">
        <ul>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组172.png" alt="" />
              <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
            </div>
            <span>经办人认证</span>
          </li>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组174.png" alt="" />
              <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
            </div>
            <span style="margin-left: -0.2083rem">组织信息核验</span>
          </li>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组177.png" alt="" />
              <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
            </div>
            <span style="margin-left: -0.0833rem; color: #999">意愿认证</span>
          </li>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组179.png" alt="" />
            </div>
            <span style="margin-left: 0px; color: #999">完成</span>
          </li>
        </ul>
      </div>
      <div class="f2">
        <ul>
          <li>
            <el-form :model="addEnt" label-width="1.2rem" :rules="addEntRules">
              <el-form-item label="企业名称" prop="name">
                <el-input v-model="addEnt.name"></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form :model="addEnt" label-width="1.2rem" :rules="addEntRules">
              <el-form-item label="统一社会信用代码" prop="idNumber">
                <el-input
                  @blur="CheckSocialCreditCode(addEnt.idNumber)"
                  v-model="addEnt.idNumber"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 营业执照 -->
      <div class="license license1" style="">
        <span class="aaa11"><span style="color: #f25757">*</span>营业执照 </span>
        <!-- 图片上传 -->
        <el-upload
          action="#"
          class="permit el-upload--picture-card"
          list-type="picture-card"
          :auto-upload="false"
          accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
          :on-change="handleChangeBusiness"
          :http-request="uploadFileBusiness"
          ref="pictureUpload4"
        >
          <div slot="file" slot-scope="{ file }">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove4(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <div class="license-right1">
          <div>
            <p>1.营业执照正、副本或复印件加盖公章后的扫描件；</p>
            <p>2.上传文件大小不超过5M；</p>
            <p>3.仅支持bmp、jpeg、png、jpg格式文件。</p>
          </div>
        </div>
      </div>
      <div class="f2" style="margin-top: 0.1563rem">
        <ul>
          <li>
            <el-form :model="addEnt" label-width="1.2rem" :rules="addEntRules">
              <el-form-item label="法定代表人姓名" prop="orgLegalName">
                <el-input v-model="addEnt.orgLegalName"></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form :model="addEnt" label-width="1.2rem" :rules="addEntRules">
              <el-form-item label="法定代表人身份证号" prop="orgLegalIdNumber">
                <el-input @blur="appFincerNo" v-model="addEnt.orgLegalIdNumber"></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form :model="addEnt" label-width="1.2rem" :rules="addEntRules">
              <el-form-item label="法定代表人手机号" prop="orgLegalPhone">
                <el-input @blur="phoneVerify" v-model="addEnt.orgLegalPhone"></el-input>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!--身份证  -->
      <div class="license">
        <span class="aaa" style="font-size: 0.0938rem; color: #606266"
          ><span style="color: #f25757">*</span>身份证
        </span>
        <!-- 正面 -->
        <!-- 图片上传 -->
        <el-upload
          action="#"
          class="permit el-upload--picture-card permit-front"
          list-type="picture-card"
          :auto-upload="false"
          accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
          :on-change="handleChangeFront"
          :http-request="uploadFileFront"
          ref="pictureUpload2"
        >
          <div slot="file" slot-scope="{ file }">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove2(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <!-- 反面 -->
        <!-- 图片上传 -->
        <el-upload
          action="#"
          class="permit el-upload--picture-card permit-reverse"
          list-type="picture-card"
          :auto-upload="false"
          accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
          :on-change="handleChangeReverse"
          :http-request="uploadFileReverse"
          ref="pictureUpload3"
        >
          <div slot="file" slot-scope="{ file }">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove3(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <div class="license-right card-right">
          <div>
            <p>1.上传文件大小不超过5M；</p>
            <p>2.仅支持bmp、jpeg、png、jpg格式文件。</p>
          </div>
        </div>
      </div>
      <div class="btn">
        <!-- <div class="btn btn1" @click="goLast()">上一步</div> -->
        <!-- <div class="btns last" @click="last">上一步</div> -->
        <button class="btns next" @click="addZZXXHYent" :disabled="isLock">下一步</button>
      </div>
    </div>

    <!-- 修改账号信息弹窗 -->
    <el-dialog
      :closeOnClickModal="false"
      title="修改账号信息"
      :visible.sync="inviteDialogVisible"
      width="30%"
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-center"></div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="inviteDialogVisible = false">取 消</button>
        <button class="dialog-footer-bnt btn2" @click="updateUserInfo()">确 定</button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { base, entHX } from '@/utils'

export default {
  data() {
    return {
      state: null,
      loading: false,
      base: '',
      fileListBusiness: [], //营业执照
      fileListFront: [], //身份证正面
      fileListReverse: [], //身份证反面
      dialogImageUrl: '', //查看缩略图
      disabled: false,
      dialogVisible: false,
      isLock: false, // 控制按钮的disable属性
      inviteDialogVisible: false,
      addEnt: {
        idNumber: '', //统一信用代码
        idType: 'CRED_ORG_USCC',
        name: '', //企业名称
        orgLegalIdNumber: '', //身份证号
        orgLegalName: '', //姓名
        orgLegalPhone: '', //手机号
        objecttype: 'RZfile'
      },
      addEntRules: {
        idNumber: [{ required: true, message: '格式错误，请重新输入', trigger: 'blur' }],
        name: [{ required: true, message: ' ', trigger: 'blur' }],
        orgLegalIdNumber: [{ required: true, message: '格式错误，请重新输入', trigger: 'blur' }],
        orgLegalPhone: [{ required: true, message: '格式错误，请重新输入', trigger: 'blur' }],
        orgLegalName: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.base = base
    this.state = this.$route.query.state
    this.entHX()
  },
  // 方法
  methods: {
    // 信息回显
    async entHX() {
      if (this.state) return
      let customerid = sessionStorage.getItem('customerid')
      if (!customerid) return
      let { data } = await entHX(customerid)
      if (!data.ent) return
      // 组织信息核验
      this.addEnt.idNumber = data.ent.licenseno
      this.addEnt.name = data.ent.entname
      this.addEnt.orgLegalName = data.ent.mainindname
      this.addEnt.orgLegalPhone = data.ent.fincerttel
      this.addEnt.orgLegalIdNumber = data.ent.fincertno
    },
    // 点击下一步调用接口
    async addZZXXHYent() {
      this.loading = true
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      let { idNumber, idType, name, orgLegalIdNumber, orgLegalName, orgLegalPhone } = this.addEnt
      let state = this.state
      let rzstatus = null
      state ? (rzstatus = '01') : (rzstatus = '')
      if (
        idNumber.trim() == '' ||
        name.trim() == '' ||
        orgLegalIdNumber.trim() == '' ||
        orgLegalName.trim() == '' ||
        this.fileListBusiness.length == 0 ||
        this.fileListFront.length == 0 ||
        this.fileListReverse.length == 0
      ) {
        this.loading = false
        this.$Message.error('请填写信息')
        return
      }

      // 校验图片格式
      if (
        !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListFront.name) ||
        !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListReverse.name) ||
        !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListBusiness.name)
      ) {
        this.loading = false
        this.$Message.warning('暂不支持上传该格式文件')
        return
      }

      // 调用接口
      let formData = new FormData()
      formData.append('file', this.fileListFront)
      formData.append('file', this.fileListReverse)
      formData.append('file', this.fileListBusiness)
      let token = sessionStorage.getItem('token')
      let url =
        this.base +
        `/api/ents/addZZXXHYent?idNumber=${idNumber}&name=${name}&idType=${idType}&orgLegalIdNumber=${orgLegalIdNumber}&orgLegalPhone=${orgLegalPhone}&orgLegalName=${orgLegalName}&objecttype=RZfile&rzstatus=${rzstatus}`
      this.axios
        .post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
        })
        .then(res => {
          if (res.data.code == 100) {
            this.loading = false
            let token = res.data.data.toekn
            let accountid = res.data.data.ent.qyaccountid
            let agentaccountid = res.data.data.ent.jbRaccountid
            let fraccountid = res.data.data.json2.accountid
            let entname = this.addEnt.name
            let coopid = res.data.data.ent.customerid
            let rzstatus = res.data.data.ent.rzstatus
            sessionStorage.setItem('token', token)
            sessionStorage.setItem('accountid', accountid)
            sessionStorage.setItem('agentaccountid', agentaccountid)
            sessionStorage.setItem('fraccountid', fraccountid)
            sessionStorage.setItem('name', this.addEnt.orgLegalName)
            sessionStorage.setItem('idNumber', this.addEnt.orgLegalIdNumber)
            sessionStorage.setItem('Phone', this.addEnt.orgLegalPhone)
            sessionStorage.setItem('coopid', coopid)
            sessionStorage.setItem('customerid', coopid)
            sessionStorage.setItem('entname', entname)
            sessionStorage.setItem('rzstatus', rzstatus)
            this.$router.push(`/authentication2?entname=${this.addEnt.name}`)
            return
          } else if (res.data.code == 32016) {
            this.loading = false
            this.$Message.error('该企业在已存在')
            return
          }
          this.loading = false
          this.$Message.error('企业信息核验未通过')
        })
        .catch(error => {
          this.loading = false
          this.$Message.error('企业信息核验未通过')
        })
    },
    // 上一步
    last() {
      this.$router.push('/authentication')
    },

    // 文件上传
    // 删除缩略图
    handleRemove4(file) {
      this.$refs.pictureUpload4.handleRemove(file)
      this.fileListBusiness = []
    },
    handleRemove2(file) {
      this.$refs.pictureUpload2.handleRemove(file)
      this.fileListFront = []
    },
    handleRemove3(file) {
      this.$refs.pictureUpload3.handleRemove(file)
      this.fileListReverse = []
    },
    // 查看缩略图
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 营业执照------------------------------------------------
    handleChangeBusiness(file, fileList) {
      this.fileListBusiness = fileList[0].raw
    },
    //自定义上传文件
    uploadFileBusiness(file) {
      // this.formData.append("file2", file.file);
      return
    },
    // 正面-----------------------------------------------------
    handleChangeFront(file, fileList) {
      this.fileListFront = fileList[0].raw
    },
    //自定义上传文件
    uploadFileFront(file) {
      // this.formData.append("file", file.file);
      return
    },

    // 反面——————————————————————————————————————————————————————————
    handleChangeReverse(file, fileList) {
      this.fileListReverse = fileList[0].raw
    },
    //自定义上传文件
    uploadFileReverse(file) {
      // this.formData.append("file1", file.file);
      return
    },

    // 身份证号码校验
    //     // 身份证号
    appFincerNo() {
      let fincertNO = this.addEnt.orgLegalIdNumber
      let IDRe18 =
        /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      let IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
      if (IDRe18.test(fincertNO) || IDre15.test(fincertNO)) {
        //判断第18位校验值
        if (fincertNO.length == 18) {
          let charArray = Array.from(fincertNO)
          //前十七位加权因子
          let idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
          //这是除以11后，可能产生的11位余数对应的验证码
          let idCardY = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
          let sum = 0
          for (let i = 0; i < idCardWi.length; i++) {
            let current = charArray[i]
            let count = current * idCardWi[i]
            sum += count
          }
          let idCardLast = charArray[17]
          let idCardMod = sum % 11
          if (idCardY[idCardMod].toUpperCase() == idCardLast.toUpperCase()) {
            return true
          } else {
            this.addEnt.orgLegalIdNumber = ''
          }
        }
      } else {
        this.addEnt.orgLegalIdNumber = ''
      }
    },
    // 统一社会信用代码
    CheckSocialCreditCode(Code) {
      let patrn = /^[0-9A-Z]+$/ // 18位校验及大写校验
      if (Code.length !== 18 || patrn.test(Code) === false) {
        this.addEnt.idNumber = ''
        return false
      } else {
        let Ancode // 统一社会信用代码的每一个值
        let Ancodevalue // 统一社会信用代码每一个值的权重
        let total = 0
        let weightedfactors = [1, 3, 9, 27, 19, 26, 16, 17, 20, 29, 25, 13, 8, 24, 10, 30, 28] // 加权因子
        let str = '0123456789ABCDEFGHJKLMNPQRTUWXY' // 不用I、O、S、V、Z
        for (let i = 0; i < Code.length - 1; i++) {
          Ancode = Code.substring(i, i + 1)
          Ancodevalue = str.indexOf(Ancode)
          total = total + Ancodevalue * weightedfactors[i] // 权重与加权因子相乘之和
        }
        let logiccheckcode = 31 - (total % 31)
        if (logiccheckcode === 31) {
          logiccheckcode = 0
        }
        let Str = '0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,T,U,W,X,Y'
        let Array_Str = Str.split(',')
        logiccheckcode = Array_Str[logiccheckcode]
        let checkcode = Code.substring(17, 18)
        if (logiccheckcode !== checkcode) {
          this.addEnt.idNumber = ''
          return false
        }
        return true
      }
    },
    // 手机号校验
    phoneVerify() {
      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(this.addEnt.orgLegalPhone)) {
        this.addEnt.orgLegalPhone = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 面包屑
.breadcrumb {
  display: flex;
  align-items: center;
  height: 0.3958rem;
  font-size: 0.0833rem;
  background-color: rgb(242, 244, 247);
  .icon {
    margin: 0 0.0521rem 0 0.0208rem;
  }
  .span {
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #999999;
  }
  img {
    width: 0.0938rem;
    height: 0.0938rem;
    margin-right: 0.026rem;
  }
}

// 主体
.box {
  box-sizing: border-box;
  width: 100%;
  height: 950px;
  background: #ffffff;
  box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
  border-radius: 0.0313rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  padding: 0.2604rem;
  .title {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.1302rem;
    h3 {
      font-size: 0.1146rem;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #222222;
    }
  }
  .f1 {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 0.1042rem;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 0.2083rem;
        .icon {
          .icon1 {
            width: 0.1875rem;
          }
          .icon2 {
            width: 0.9375rem;
            height: 0.0104rem;
            margin: 0 0.1042rem;
          }
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #627dca;
          margin-left: -0.1563rem;
          margin-top: 0.0156rem;
        }
      }
    }
  }
  .f2 {
    display: flex;
    width: 3.9063rem;
    margin-top: 5%;
    ul {
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      li {
        margin-bottom: 0.0781rem;
        height: 0.2604rem;
      }
    }
  }
  // 身份证正反面
  .license {
    display: flex;
    justify-content: center;
    @media only screen and (min-width: 1px) and (max-width: 1450px) {
      margin-top: 0.1042rem;
      margin-left: 0.75rem;
    }
    @media only screen and (min-width: 1451px) and (max-width: 2580px) {
      margin-left: 2.05rem;
    }
    .aaa {
      @media only screen and (min-width: 1px) and (max-width: 1450px) {
        width: 0.45rem;
      }
      @media only screen and (min-width: 1451px) and (max-width: 2580px) {
        width: 0.4rem;
      }
      font-size: 0.0833rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
    .permit {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      width: 1.25rem;
      height: 0.7813rem;
      background: url(@/assets/authentication/组65.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 0.0781rem;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 1.3021rem;
        height: 100%;
      }
    }
    .permit-front {
      background: url(@/assets/authentication/组66.png) no-repeat;
      background-size: 100% 100%;
    }
    .permit-reverse {
      background: url(@/assets/authentication/组67.png) no-repeat;
      background-size: 100% 100%;
    }
    .card {
      width: 1.125rem;
      height: 0.6406rem;
      margin-right: 0.0417rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .license-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      @media only screen and (min-width: 0px) and (max-width: 1450px) {
        display: none;
      }
      div {
        width: 100%;
        p {
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          line-height: 0.125rem;
        }
      }
    }
  }
  .license1 {
    @media only screen and (min-width: 0px) and (max-width: 1200px) {
      margin-left: -0.85rem;
    }
    @media only screen and (min-width: 1200px) and (max-width: 1349px) {
      margin-left: 1.3rem;
    }
    @media only screen and (min-width: 1350px) and (max-width: 1449px) {
      margin-left: 1.07rem;
    }
    @media only screen and (min-width: 1450px) and (max-width: 1559px) {
      margin-left: 0.96rem;
    }
    @media only screen and (min-width: 1560px) and (max-width: 2580px) {
      margin-left: 0.7552rem;
    }
    .aaa11 {
      font-size: 0.0938rem;
      color: #606266;

      @media only screen and (min-width: 1150px) and (max-width: 1349px) {
        width: 0.52rem;
      }
      @media only screen and (min-width: 1350px) and (max-width: 1449px) {
        width: 0.5rem;
        text-align: right;
      }
      @media only screen and (min-width: 1450px) and (max-width: 1559px) {
        width: 0.5rem;
        text-align: right;
      }
      @media only screen and (min-width: 1560px) and (max-width: 2580px) {
        width: 0.6rem;
        text-align: right;
      }
      padding: 0px 0.0729rem;
      text-align: center;
    }
  }
  .license-right1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    @media only screen and (min-width: 0px) and (max-width: 1200px) {
      display: none;
    }
    div {
      width: 100%;
      p {
        font-size: 0.0729rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #999999;
        line-height: 0.125rem;
      }
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6458rem;
    height: 0.1823rem;
    .btns {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.0469rem;
      height: 0.1823rem;
      background-color: #ccc;
      // border: 1px solid #3f6ef2;
      border-radius: 0.0208rem;
      font-size: 0.0938rem;
      margin-top: 0.4167rem;
    }
    .last {
      margin-right: 0.1771rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      // color: #3f6ef2;
      color: #fff;
    }
    .next {
      background: #3f6ef2;
      color: #ffffff;
    }
  }
}
// 弹出框
.dialog-center {
  width: 90%;
  margin: 0 auto;
}
// 弹框按钮
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  .dialog-footer-bnt {
    width: 121px;
    height: 31px;
    color: #3f6ef2;
    border: 1px solid #3f6ef2;
    border-radius: 4px;
    background-color: #fff;
  }
  .btn2 {
    color: #fff;
    background-color: #3f6ef2;
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 2.5521rem;
  height: 0.2031rem;
  font-size: 0.0833rem;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 0.0521rem;
  color: #606266;
  outline: 0;
}
::v-deep .el-form-item__label {
  font-size: 0.0938rem;
}
::v-deep .el-form-item__error {
  font-size: 0.0625rem;
  line-height: 1;
  @media only screen and (min-width: 0px) and (max-width: 1299px) {
    margin-top: -12px;
  }
  @media only screen and (min-width: 1300px) and (max-width: 1449px) {
    margin-top: -8px;
  }
  @media only screen and (min-width: 1450px) and (max-width: 1600px) {
    margin-top: -5px;
  }
}
</style>
<style lang="scss">
// 上传
.el-upload--picture-card {
  background-color: rgba(245, 245, 245, 0.1);
  border: 0;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 100%;
  height: 160px;
  display: flex;
  margin: 0;
  z-index: 888;
}
.el-dialog__header {
  border: 0px;
}
.el-form-item {
  margin-bottom: 0;
}
</style>
